<template>
  <div>
    <!-- 项目费用  star-->
    <a-row>
      <a-col :span="10">
        <a-descriptions class="title-point" :title="$t('all.autotext599')"></a-descriptions>
      </a-col>
      <a-col :span="14" align="right">
        <a-button
          type="primary"
          v-if="$auth('PROJECT_COST.PROJECT_EXPORT_PDF') && $store.state.user.project.status!==3"
          @click="exportTap"
        >
          {{ $t('all.autotext228') }}
        </a-button>
      </a-col>
    </a-row>
    <template v-if="$auth('PROJECT_BOARD.OVERALL_BUDGET')">
      <GeneralBudget from="high"></GeneralBudget>
      <div class="gap"></div>
    </template>
    <!-- 项目费用 end-->
    <!-- 申请明细 star -->
    <a-descriptions class="title-point" :title="$t('all.autotext472')" style="margin-top:20px"></a-descriptions>
    <feeApplication :allCenterList="allCenterList"/>
    <!-- 申请明细 end -->
    <!-- 付款明细、项目预算、资金流水 -->
    <export-com :visible.sync="exVisible" />
  </div>
</template>
<script>
import moment from 'moment'
import { apiGetAllCenter } from '@api/cost/cost'
import { getPaymentList } from '@/api/project/finance'
import GeneralBudget from '@/views/data-board/components/general-budget.vue'
import feeApplication from '@/views/high/board/feeApplication/index'
import exportCom from './export'

export default {
  components: {
    exportCom,
    feeApplication,
    GeneralBudget
  },
  props: ['detailsInfo'],
  data () {
    return {
      payKey: '4',
      projectCost: [
        {
          allName: this.$t('all.autotext151'),
          allNum: '0.00',
          studyName: this.$t('all.autotext1226'),
          studyNum: '0.00',
          serviceName: this.$t('all.autotext449'),
          serviceNum: '0.00'
        },
        {
          allName: this.$t('all.autotext343'),
          allNum: '0.00',
          studyName: this.$t('all.autotext1406'),
          studyNum: '0.00',
          serviceName: this.$t('all.autotext672'),
          serviceNum: '0.00'
        },
        {
          allName: this.$t('all.autotext471'),
          allNum: '0.00',
          studyName: this.$t('all.autotext849'),
          studyNum: '0.00',
          serviceName: this.$t('all.autotext139'),
          serviceNum: '0.00'
        }
        // {
        //   allName: this.$t('all.autotext557'),
        //   allNum: '0.00',
        //   studyName: this.$t('all.autotext506'),
        //   studyNum: '0.00',
        //   serviceName: this.$t('all.autotext804'),
        //   serviceNum: '0.00'
        // }
      ],
      timeArr: [],
      queryParam: {
        proId: '',
        type: '',
        status: '',
        bTime: '',
        eTime: ''
      },
      columns: [
        {
          title: this.$t('all.autotext1156'),
          dataIndex: 'applyNo'
        },
        {
          title: this.$t('all.autotext949'),
          dataIndex: 'researchCenterNo',
          customRender: (text, record) => {
            return `${record.orgNo} - ${record.orgName}`
          }
        },
        {
          title: this.$t('all.autotext229'),
          dataIndex: 'type'
        },
        {
          title: this.$t('all.autotext1521'),
          dataIndex: 'createAccount',
          customRender: (text, record) => {
            return `${record.createRoleName} - ${record.createAccount}`
          }
        },
        {
          title: this.$t('all.autotext1543'),
          dataIndex: 'serviceAmount'
        },
        {
          title: this.$t('all.autotext597'),
          dataIndex: 'bankNo',
          customRender: (text, record) => {
            return `${record.pstRoleName} - ${record.ptsNo}`
          }
        },
        {
          title: this.$t('all.autotext867'),
          dataIndex: 'totalAmount'
        },
        {
          title: this.$t('all.autotext244'),
          dataIndex: 'createTime',
          customRender: (text, record) => {
            return moment(text).format('YYYY-MM-DD HH:mm:ss')
          }
        },
        {
          title: this.$t('all.autotext550'),
          dataIndex: 'applyReason',
          width: 200
        },
        {
          title: this.$t('all.autotext1466'),
          dataIndex: 'now'
        }
      ],
      dataInfo: {},
      isFinanceDetailSkip: '1',
      exVisible: false,
      allCenterList: []
    }
  },
  computed: {
    serviceCharge () {
      const { serviceFee } = this.dataInfo
      return serviceFee || 0
    }
    /**
     * 服务费用类型
     * @return {number} 1 - 额定费用 2 - 付款金额比例 0 - 无需服务费
     */
    // serviceChargeType () {
    //   const { serviceFee } = this.detailsInfo
    //   if (serviceFee) return 1
    //   if (serviceFeePercent) return 2
    //   return 0
    // }
  },
  created () {
    const pd = localStorage.getItem('CURRENT_PROID')
    if (pd) {
      this.queryParam.proId = parseInt(pd)
      this.getBudgetByPaymentList()
      this.getAllCenterList()
    }
  },
  mounted () {
    if (this.$store.state.app.financeKey) {
      this.isFinanceDetailSkip = this.$store.state.app.financeKey
    }
    if (this.$auth('PROJECT.PROJECT_PAY_V2')) {
      this.isFinanceDetailSkip = '1'
    } else if (this.$auth('PROJECT.PROJECT_INCOME_V2')) {
      this.isFinanceDetailSkip = '2'
    } else if (this.$auth('PROJECT.PROJECT_BUDGET_V2')) {
      this.isFinanceDetailSkip = '3'
    }
  },
  methods: {
    // loadData (parameter) {
    //   if (this.$auth('PROJECT.PROJECT_COST_DETAIL_LIST_V2') || this.$auth('PROJECT.PROJECT_COST_LIST')) {
    //     return getPaymentList(Object.assign(parameter, this.queryParam)).then(res => {
    //       if (this.$auth('PROJECT.PROJECT_COST_LIST')) {
    //         this.dataInfo = res
    //         // 申请次数
    //         this.applyNum[0].num = res.recordApplyTotalCount || 0
    //         this.applyNum[1].num = res.recordApplyTotalCount30 || 0
    //         this.applyNum[2].num = res.recordApplyTotalCount31 || 0
    //         this.applyNum[3].num = res.recordApplyTotalCount50 || 0
    //         this.applyNum[4].num = res.recordApplyTotalCount70 || 0
    //         this.applyNum[5].num = res.recordApplyTotalCount60 || 0
    //         this.applyNum[6].num = res.recordApplyTotalCount41 || 0
    //         this.applyNum[7].num = res.recordApplyTotalCount20 || 0
    //         this.applyNum[8].num = res.recordApplyTotalCount51 || 0
    //         this.applyNum[9].num = res.recordApplyTotalCount1 || 0
    //         this.applyNum[10].num = res.recordApplyTotalCount11 || 0

    //         this.costNum[0].num = (res.paid || 0).toFixed(2)
    //         this.costNum[1].num = (res.listTopay || 0).toFixed(2)

    //         this.costNumBreak[0].num = (res.studyListPaid || 0).toFixed(2)
    //         this.costNumBreak[1].num = (res.studyListToPay || 0).toFixed(2)
    //         this.costNumBreak[2].num = (res.serverListPaid || 0).toFixed(2)
    //         this.costNumBreak[3].num = (res.serverListTopay || 0).toFixed(2)
    //       }
    //       if (this.$auth('PROJECT.PROJECT_COST_DETAIL_LIST_V2')) {
    //         return res.page
    //       } else {
    //         return Promise.resolve(buildPaginationObj([]))
    //       }
    //     })
    //   } else {
    //     return Promise.resolve(buildPaginationObj([]))
    //   }
    // },
    // 不要问为什么这里又请求一遍，问就是需求需要 💩
    getBudgetByPaymentList () {
      return getPaymentList(this.queryParam).then(res => {
        // 项目费用
        this.projectCost[0].allNum = res.budget.toFixed(2)
        this.projectCost[0].studyNum = Number(res.studyBudgetAmount).toFixed(2)
        this.projectCost[0].serviceNum = Number(res.serverBudgetAmount).toFixed(2)
        this.projectCost[1].allNum = res.paid.toFixed(2)
        this.projectCost[1].studyNum = Number(res.studyPaidAmount).toFixed(2)
        this.projectCost[1].serviceNum = Number(res.serverPaidAmount).toFixed(2)
        this.projectCost[2].allNum = (res.budget - res.paid).toFixed(2)
        this.projectCost[2].studyNum = (res.studyBudgetAmount - res.studyPaidAmount).toFixed(2)
        this.projectCost[2].serviceNum = (res.serverBudgetAmount - res.serverPaidAmount).toFixed(2)
        // this.projectCost[3].allNum = (res.breakAwayFromPrice + res.serverBreakAwayFromPrice).toFixed(2)
        // this.projectCost[3].studyNum = res.breakAwayFromPrice.toFixed(2)
        // this.projectCost[3].serviceNum = res.serverBreakAwayFromPrice.toFixed(2)
      })
    },
    changeCreateTime (date, dateString) {
      this.queryParam.bTime = dateString[0]
      this.queryParam.eTime = dateString[1]
    },
    // 获取所有中心下拉列表
    getAllCenterList () {
      const proId = localStorage.getItem('CURRENT_PROID') || ''
      apiGetAllCenter({ proId }).then(res => {
        this.allCenterList = res
      })
    },
    // 重置
    handleReast () {
      this.timeArr = []
      this.queryParam.bTime = ''
      this.queryParam.eTime = ''
      this.$refs.formRef.resetFields()
      this.$refs.table.refresh(true)
    },
    // 导出结算单
    exportTap () {
      this.exVisible = true
    },
    handBudget () {
      this.$refs.table.refresh(true)
    },
    // tab栏切换
    handleTabsChange (key) {
      this.isFinanceDetailSkip = key
      this.$store.commit('changeFinanceKey', key)
    },

    handleTabsPaneChange (key) {
      console.log('key', key)
      this.payKey = key
    }
  }
}
</script>
<style lang="less" scoped>
.title-point {
  padding-left: 20px;
  position: relative;
  &::before {
    content: '';
    display: block;
    width: 4px;
    height: 20px;
    background: #3D92FF;
    position: absolute;
    left: 0;
    top: 2px;
  }
}
.cost-row {
  background: #F6F9FB;
  padding: 20px 0;
  margin-bottom: 30px;
  .cost-col {
    border-right: 1px solid #CCD4E1;
    padding: 4px 20px;
    &:last-child {
      border: none;
    }
    .cost-col-title{
      font-size: 16px;
      color: #4D5C6F;
    }
    .cost-col-num{
      font-size: 24px;
      color: #0F121B;
      font-weight: bold;
    }
    .cost-col-tab{
      font-size: 16px;
      color: #8193B1;
      margin-top: 4px;
      span {
        color: #0F121B;
        margin-left: 8px;
      }
    }
    .cost-col-space {
      margin-top: 24px;
    }
  }
}
.apply-row {
  border: 1px solid #E5EBF3;
  margin-top: 20px;
  .apply-col {
    padding: 20px;
    border-right: 1px solid #E5EBF3;
    &:last-child {
      border: none;
    }
    /deep/.ant-descriptions-item>span {
      font-size: 16px;
    }
    /deep/.ant-descriptions-item .ant-descriptions-item-colon {
      color: #8193B1;
    }
    .apply-cost-col {
      padding-top:24px;
      .apply-cost-col-name {
        color: #8193B1;
        font-size: 16px;
      }
      .apply-cost-col-num {
        font-size: 24px;
        // font-weight: bold;
      }
    }
    .apply-cost-col-break{
      color: #8193B1;
      font-size: 14px;
      margin-top:10px;
      span:nth-child(2){
        color:#000;
      }
    }
    .apply-service {
      font-size: 16px;
      margin-top:30px;
      span {
        color: #8193B1;
      }
      span:nth-child(2){
        font-size: 24px;
        // font-weight: bold;
        color:#000;
      }
    }
  }
}
</style>
